<template>
    <div class="article-edit">
        <el-card class="!border-none" shadow="never">
            <el-page-header :content="$route.query.type == 'pass'?'服务商审核':$route.meta.title" @back="$router.back()" />
        </el-card>
        <el-tabs class="align-middle" v-model="defaultTab" @tab-change="tabChange">
            <el-form ref="formRef" :model="formData" :rules="rules" label-width="110px">
                <el-tab-pane label="基本信息" name="channel_info">

                    <el-card class="!border-none mt-4" shadow="never">
                        <div class="font-medium mb-7">基础信息</div>
                        <el-form-item label="所属城市" prop="from_area_id">
                            <el-select-v2
                                v-model="formData.from_area_id"
                                filterable
                                clearable
                                :options="optionCity"
                                placeholder="请选择"
                                class="w-[320px]"
                                :height="280"
                            />
                        </el-form-item>
                        
                        <el-form-item label="姓名" prop="name">
                            <div class="w-80">
                                <el-input v-model="formData.name" placeholder="请输入姓名" type="text" maxlength="15"
                                    show-word-limit clearable :disabled="allDisabled" />
                            </div>
                        </el-form-item>

                        <el-form-item label="头像" prop="header">
                            <div class="w-80">
                                <div>
                                    <material-picker v-model="formData.header" :limit="1" :disabled="allDisabled" />
                                </div>
                                <div class="form-tips">建议尺寸：200*200px</div>
                            </div>
                        </el-form-item>

                        <el-form-item label="个人简介" prop="desc">
                            <div class="w-80">
                                <el-input v-model="formData.desc" placeholder="请输入个人简介" type="textarea"
                                    :autosize="{ minRows: 2, maxRows: 6 }" maxlength="600" show-word-limit clearable :disabled="allDisabled" />
                            </div>
                        </el-form-item>

                        <el-form-item label="微信号" prop="wx_no">
                            <div class="w-80">
                                <el-input v-model="formData.wx_no" placeholder="请输入微信号" type="text" maxlength="30"
                                    show-word-limit clearable :disabled="allDisabled" />
                            </div>
                        </el-form-item>

                        <el-form-item label="身份证号" prop="id_card">
                            <div class="w-80">
                                <el-input v-model="formData.id_card" placeholder="请输入身份证号" type="text"
                                    maxlength="18" show-word-limit clearable :disabled="allDisabled" />
                            </div>
                        </el-form-item>

                        <el-form-item label="手机号" prop="phone">
                            <div class="w-80">
                                <el-input v-model="formData.phone" placeholder="请输入手机号" type="text" maxlength="11" :disabled="!!route.query.id"
                                    show-word-limit clearable />
                            </div>
                        </el-form-item>
                        <el-form-item v-if="route.query.id" label="提交人手机号" prop="user_phone">
                            <div class="w-80">
                                <el-input v-model="formData.user_phone" placeholder="请输入手机号" type="text" maxlength="11" :disabled="!!route.query.id"
                                    show-word-limit clearable />
                            </div>
                        </el-form-item>

                        <el-form-item label="公司" prop="company">
                            <div class="w-80">
                                <el-input v-model="formData.company" placeholder="请输入公司名称" type="text"
                                    maxlength="50" show-word-limit clearable :disabled="allDisabled" />
                            </div>
                        </el-form-item>

                        <el-form-item label="已认证" prop="is_auth">
                            <div class="w-80">
                                <el-radio-group v-model="formData.is_auth" :disabled="allDisabled">
                                    <!-- works when >=2.6.0, recommended ✔️ not work when <2.6.0 ❌ -->
                                    <!--              <el-radio value="Value 1">Option 1</el-radio>-->
                                    <el-radio :label="1">是</el-radio>
                                    <el-radio :label="0">否</el-radio>
                                </el-radio-group>
                            </div>
                        </el-form-item>


                        <el-form-item label="地址" prop="address">
                            <div class="w-80">
                                <el-input v-model="formData.address" placeholder="请输入地址" type="text"
                                    maxlength="100" show-word-limit clearable :disabled="allDisabled" />
                                    <!-- @focus="focusAddress" -->
                                    <el-button :disabled="allDisabled" @click="focusAddress">地图选点</el-button>
                            </div>
                        </el-form-item>

                        <el-form-item label="经度" prop="lon">
                            <div class="w-80">
                                <el-input v-model="formData.lon" placeholder="请输入经度" type="text" maxlength="30"
                                    show-word-limit clearable :disabled="allDisabled" />
                            </div>
                        </el-form-item>

                        <el-form-item label="纬度" prop="lat">
                            <div class="w-80">
                                <el-input v-model="formData.lat" placeholder="请输入纬度" type="text" maxlength="30"
                                    show-word-limit clearable :disabled="allDisabled" />
                            </div>
                        </el-form-item>

                        <el-form-item label="职务" prop="position_name">
                            <div class="w-80">
                                <el-input v-model="formData.position_name" placeholder="请输入职务" type="text" maxlength="10"
                                    show-word-limit clearable :disabled="allDisabled" />
                            </div>
                        </el-form-item>

                        <el-form-item label="服务类型" prop="cate_id">
                            <div class="w-80">
                                <el-select class="w-[280px]" multiple v-model="formData.cate_id" @change="changeProductCate" :disabled="allDisabled" :multiple-limit="3">
                                    <el-option v-for="(item) in cate_list" :label="item.name"
                                        :value="String(item.id)" :key="String(item.id)"/>
                                </el-select>
                            </div>
                        </el-form-item>

                        <el-form-item label="服务城市" prop="server_area">
                            <div class="w-80">
                                <el-select-v2
                                    v-model="formData.server_area"
                                    filterable
                                    clearable
                                    :options="optionCity"
                                    placeholder="请选择"
                                    class="w-[280px]"
                                    :height="280"
                                    @change="changeCity" 
                                    :disabled="allDisabled"
                                    multiple
                                />
                            </div>
                        </el-form-item>

                        <el-form-item label="标签" prop="tag_ids">
                            <div style="width: 60%;">
                                <el-checkbox-group v-model="formData.tags" :max="3" :disabled="allDisabled">
                                    <el-checkbox v-for="item in optionsData.tag_list" :label="item.name.toString()"
                                        :value="item.name.toString()" :key="item.name.toString()">
                                        {{ item.name }}
                                    </el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </el-form-item>
                        <el-form-item label="" prop="tag_ids">
                            <div>
                                <el-button :icon="Plus" @click="open" :disabled="allDisabled">新增标签</el-button>
                            </div>
                        </el-form-item>

                        <el-form-item label="对公账户" prop="account">
                            <div class="w-80">
                                <el-input v-model="formData.account" placeholder="请输入对公账户" type="text" maxlength="19"
                                    show-word-limit clearable :disabled="allDisabled" />
                            </div>
                        </el-form-item>
                        <el-form-item label="户名" prop="account_name">
                            <div class="w-80">
                                <el-input v-model="formData.account_name" placeholder="请输入户名" type="text" maxlength="18"
                                    show-word-limit clearable :disabled="allDisabled" />
                            </div>
                        </el-form-item>
                        <el-form-item label="开户银行" prop="account_bank">
                            <div class="w-80">
                                <el-input v-model="formData.account_bank" placeholder="请输入开户银行" type="text" maxlength="30"
                                    show-word-limit clearable :disabled="allDisabled" />
                            </div>
                        </el-form-item>

                        <el-form-item label="启用状态" prop="is_enable">
                            <div class="w-80">
                                <!-- :disabled="!route.query.id" -->
                                <el-radio-group v-model="formData.is_enable" :disabled="allDisabled">
                                    <!-- works when >=2.6.0, recommended ✔️ not work when <2.6.0 ❌ -->
                                    <!--              <el-radio value="Value 1">Option 1</el-radio>-->
                                    <el-radio :label="1">启用</el-radio>
                                    <el-radio :label="0">停用</el-radio>
                                </el-radio-group>
                            </div>
                        </el-form-item>
                    </el-card>
                    <el-card class="!border-none mt-4" shadow="never">
                        <div class="font-medium mb-7">企业信息</div>
                        <el-form-item label="工商营业执照">
                            <div class="w-80">
                                <div>
                                    <material-picker v-model="formData.company_info.business_image_url" :limit="1" :disabled="true" />
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="公司全称">
                            <div class="w-80">
                                <el-input v-model="formData.company_info.business_name" type="text"
                                    show-word-limit clearable :disabled="true" />
                            </div>
                        </el-form-item>
                        <el-form-item label="社会信用代码">
                            <div class="w-80">
                                <el-input v-model="formData.company_info.business_credit_code" type="text"
                                    show-word-limit clearable :disabled="true" />
                            </div>
                        </el-form-item>
                        <el-form-item label="法人身份证正面">
                            <div class="w-80">
                                <div>
                                    <material-picker v-model="formData.company_info.id_card_front_image_url" :limit="1" :disabled="true" />
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="法人身份证反面">
                            <div class="w-80">
                                <div>
                                    <material-picker v-model="formData.company_info.id_card_back_image_url" :limit="1" :disabled="true" />
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="法人姓名">
                            <div class="w-80">
                                <el-input v-model="formData.company_info.id_card_name" type="text"
                                    show-word-limit clearable :disabled="true" />
                            </div>
                        </el-form-item>
                        <el-form-item label="法人身份证">
                            <div class="w-80">
                                <el-input v-model="formData.company_info.id_card_no" type="text"
                                    show-word-limit clearable :disabled="true" />
                            </div>
                        </el-form-item>
                    </el-card>
                </el-tab-pane>
                <el-tab-pane label="服务产品" name="relate_product">
                    <!-- <editor v-if="defaultTab == 'relate_product'" v-model="formData.infos" :height="567" /> -->
                    <el-card class="!border-none mt-4" shadow="never">
                        <div>
                            <router-link
                                v-perms="['server.server/saveGood']"
                                :to="{path: getRoutePath('server.server/saveGood'), query: { server_id: route.query.id}}"
                            >
                                <el-button type="primary" class="mb-4">
                                    <template #icon>
                                        <icon name="el-icon-Plus"/>
                                    </template>
                                    新增产品
                                </el-button>
                            </router-link>
                        </div>
                        <el-table size="large" v-loading="pager.loading" :data="pager.lists">
                            <el-table-column label="序号" type="index" :index="indexAdd" min-width="90" />
                            <el-table-column label="产品类型" prop="type_name" min-width="160" />
                            <el-table-column label="产品名称" prop="name" min-width="180" />
                            <el-table-column label="创建时间" prop="create_time" min-width="190" />
                            <el-table-column label="是否参与补贴" prop="has_subsidy" min-width="120">
                                <template #default="{ row }">
                                    <span v-if="row.has_subsidy == 0">否</span>
                                    <span v-if="row.has_subsidy == 1">是</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="产品状态" prop="status" min-width="120">
                                <template #default="{ row }">
                                   <span>{{ goodStatus(row.status) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="销量" prop="buy_count" min-width="120"></el-table-column>
                            <el-table-column label="操作" width="200" fixed="right">
                                <template #default="{ row }">
                                    <el-button v-if="row.status == 0 || row.status == 2" v-perms="['server.server/changeGoodStatus']" type="warning" link @click="handleUp(row.id)">上架</el-button>
                                    <el-button v-if="row.status == 0 || row.status == 2" v-perms="['server.server/goodInfo']" type="primary" link @click="handleInfo(row)">编辑</el-button>
                                    <el-button v-if="row.status == 0 || row.status == 2" v-perms="['server.server/delGoods']" type="danger" link @click="handleDelete(row.id)">删除</el-button>

                                    <el-button v-if="row.status == 1" v-perms="['server.server/changeGoodStatus']" type="danger" link @click="handleDown(row.id)">下架</el-button>
                                    <el-button v-if="row.status == 1" v-perms="['server.server/goodInfo']" type="primary" link @click="handleInfo(row)">查看详情</el-button>
                                    
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </el-tab-pane>
                <el-tab-pane label="保证金" name="bond_info">
                    <el-card class="!border-none mt-4" shadow="never">
                        <el-table size="large" :data="formData.bond_info">
                            <el-table-column label="序号" type="index" min-width="90" />
                            <el-table-column label="单号" prop="sn" min-width="180" >
                                <template #default="{ row }">
                                        <el-link type="primary" @click="() => {
                                            $router.push({ path: getRoutePath('server.server/orderList'), query: { sn: row.sn } })
                                        }">{{ row.sn }}</el-link>
                                </template>
                            </el-table-column>
                            <el-table-column label="账号" prop="account" min-width="160" >
                                <template #default="{ row }">
                                    <span>{{ formData.user_phone }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="服务商名称" prop="real_name" min-width="160" >
                                <template #default="{ row }">
                                    <span>{{ formData.name }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="服务类型" prop="cate_name" min-width="160" >
                                <template #default="{ row }">
                                    <span>{{ formData.cate_name }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="保证金" prop="actual_money" min-width="160" />
                            <el-table-column label="支付方式" prop="pay_type" min-width="160" >
                                <template #default="{ row }">
                                    <span>{{ payType(row.pay_type) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="保证金状态" prop="status" min-width="160" >
                                <template #default="{ row }">
                                    <span>{{ payTxt(row.status) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="支付时间" prop="pay_time" min-width="190" />
                            <el-table-column label="退回时间" prop="back_time" min-width="190" />
                        </el-table>
                    </el-card>
                </el-tab-pane>
            </el-form>
        </el-tabs>
        <footer-btns>
            <el-button v-if="$route.query.type != 'pass' && formData.from_area_id == 0" type="primary" @click="handleSave" v-prevent-reclick="3000">保存</el-button>
            <el-button v-if="$route.query.type == 'pass'" type="primary" @click="handleSave" v-prevent-reclick="3000">审核通过</el-button>
            <el-button v-if="$route.query.type == 'pass'"  @click="()=>{$router.back()}">取消</el-button>
        </footer-btns>

        <product-popup v-if="showProduct" ref="productRef" @success="getProduct" @close="showProduct = false" />
        <map-area ref="mapArea" @save="mapInfo" />
    </div>
</template>

<script lang="ts" setup name="channelListsEdit">
import type { FormInstance } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { saveUser, userInfo, serviceTag, cateList, passUser, getDetail, passDetail, goodsList, changeGoodStatus, delGoods } from '@/api/service';
import useMultipleTabs from '@/hooks/useMultipleTabs'
import { useDictOptions } from "@/hooks/useDictOptions";
import feedback from '@/utils/feedback';
import ProductPopup from './producet.vue';
import MapArea from '@/components/map/index.vue'
// import MapArea from '@/components/map/other.vue'
import { shallowRef, ref, nextTick, reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import useAppStore from '@/stores/modules/app'
import {getRoutePath} from '@/router'
import { usePaging } from '@/hooks/usePaging';

const useApp = useAppStore()
const showCity:any = [{value:'0',label: '平台'}].concat(useApp.optionCity);
const optionCity:any = [{value:'0',label: '全国'}].concat(useApp.optionCity);
const productRef = shallowRef<InstanceType<typeof ProductPopup>>()
const mapArea = ref()
const showProduct = ref(false)
// 子组件成功回调
const getProduct = (val:any)=>{
	// console.log(val);
}
// 点击添加产品按钮，打开弹窗
const productAdd = async () => {
    showProduct.value = true
	await nextTick()
	productRef.value?.open('add')
}
const payTxt = (num:any) => {
    return computed(():string=>{
        let txt = '';
        switch(num) {
            case 0: txt = '未支付保证金';break;
            case 1: txt = '已支付保证金';break;
            case 2: txt = '已退保证金';break;
        }
        return txt;
    })
}
const payType = (num:any) => {
    return computed(():string=>{
        let txt = '';
        switch(num) {
            case 1: txt = '微信';break;
            case 2: txt = '支付宝';break;
            case 4: txt = '钱包 ';break;
            case 5: txt = '小程序 ';break;
        }
        return txt;
    })
}
const goodStatus = (num:any) => {
    return computed(():string=>{
        let txt = '';
        switch(num) {
            case 1: txt = '已上架';break;
            case 2: txt = '待上架';break;
            case 3: txt = '待审核';break;
            case 4: txt = '已驳回';break;
        }
        return txt;
    })
}

//点击选择地址
const focusAddress = (e: any) => {
    // if (allDisabled.value) {
    //     return false
    // }
    // console.log(e)
    mapArea.value.keywords(formData.address);
    mapArea.value.dialogVisible(true);
}

// 地图信息返回
const mapInfo = async (data: any) => {
    formData.address = data.name;
    formData.lon = data.location.lng;
    formData.lat = data.location.lat;
}

const tableData = [
  {
    id:1,
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }]

const route = useRoute()
const router = useRouter()
const formData:any = reactive({
    // area_type: '平台',
    area_id: '0',
    server_arr: [],
    from_area_id: '',
    server_area: [],
    id: '',
    name: '',
    header: '',
    desc: '',
    wx_no: '',
    id_card: '',
    phone: '',
    user_phone: '',
    company: '',
    address: '',
    position_name: '',
    cate_id: [],
    tag_ids: [],
    tags: [],
    is_enable: 1,
    is_auth: '',
    infos: '',
    lon: '',
    lat: '',
    account: '',
    account_bank: '',
    account_name: '',
    company_info: {
        business_image_url: '',
        business_name: '',
        business_credit_code: '',
        id_card_front_image_url: '',
        id_card_back_image_url: '',
        id_card_name: '',
        id_card_no: ''
    },// 公司信息
    bond_info: [],// 保证金信息
    cate_name: ''
})

const { removeTab } = useMultipleTabs()
const formRef = shallowRef<FormInstance>()
const rules = reactive({
    // area_type: [{ required: true, message: '请选择所属城市', trigger: 'blur' }],
    name: [{ required: true, message: '请填写姓名', trigger: 'blur' }],
    header: [{ required: true, message: '请选择头像', trigger: 'blur' }],
    id_card: [{ required: true, message: '请填写身份证号', trigger: 'blur' }],
    phone: [{ required: true, message: '请填写手机号', trigger: 'blur' }],
    company: [{ required: true, message: '请填写公司名称', trigger: 'blur' }],
    address: [{ required: true, message: '请填写公司地址', trigger: 'blur' }],
    lon: [{ required: true, message: '请填写经度', trigger: 'blur' }],
    lat: [{ required: true, message: '请填写纬度', trigger: 'blur' }],
    position_name: [{ required: true, message: '请填写职位', trigger: 'blur' }],
    cate_id: [{ required: true, message: '请选择服务类型', trigger: 'blur' }],
    server_area: [{ required: true, message: '请选择服务城市', trigger: 'blur' }],
    is_enable: [{ required: true, message: '请选择启用状态', trigger: 'blur' }],
    is_auth: [{ required: true, message: '请选择是否认证', trigger: 'blur' }],
    account: [{ required: true, message: '请填写对公账户', trigger: 'blur' }],
    account_bank: [{ required: true, message: '请填写户名', trigger: 'blur' }],
    account_name: [{ required: true, message: '请填写开户银行', trigger: 'blur' }],
})
//默认选择的tab
const defaultTab = ref('channel_info')

const open = () => {
  ElMessageBox.prompt('请输入新的标签', '新增标签', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  })
    .then(({ value }) => {
    optionsData.tag_list.push({
        name: value
    })
    })
    .catch(() => {
      
    })
}
const bond_data:any = ref([{}])
// 获取当前详情
const getDetails = async () => {
    await nextTick()
    const data = await userInfo({
        id: route.query.id
    })
    data.tag_ids = [];
    let arr: number[] = []
    data.cate_id.split(',').forEach((item: any)=>{
        if (item !== '') {
            arr.push(item)
        }
    })
    data.cate_id = arr
    formData.is_auth = '0'
    formData.is_enable = 1
    Object.keys(formData).forEach((key) => {
        //@ts-ignore
        formData[key] = data[key]
    })
    bond_data.value = data.bond_info;
    console.log('bond_data========')
    console.log(bond_data.value)
    formData.from_area_id = String(formData.from_area_id)
    if (data.area_arr.length == 0) {
        formData.server_area = ['0']
    } else {
        formData.server_area = data.area_arr
    }
    
    formData.server_arr = String(formData.area_id).split(',')
    // if (formData.from_area_id != 0) {
    //     allDisabled.value = true;
    // } else {
    //     allDisabled.value = false;
    // }
    // 没有公司信息就显示空
    // let company_info = {
    //     business_image_url: '',
    //     business_name: '',
    //     business_credit_code: '',
    //     id_card_front_image_url: '',
    //     id_card_back_image_url: '',
    //     id_card_name: '',
    //     id_card_no: ''
    // }
    // Object.keys(company_info).forEach((key) => {
    //     //@ts-ignore
    //     formData.company_info[key] = company_info[key]
    // })

    
    console.log(formData)
    await nextTick()
    setTimeout(()=>{
        let objArr:any = []
        optionsData.tag_list.forEach((itemC)=>{
            objArr.push(itemC.name)
        })
        if (data.tags.length == 0) {
            return false
        }
        data.tags.forEach((item: any)=>{
            if (objArr.indexOf(item) === -1) {
                optionsData.tag_list.push({
                    name: item
                })
            }
        })
    },300)
    
}

const { optionsData } = useDictOptions<{
    // cateList: any,
    tag_list: any[]
}>({
    // cateList: {
    //     api: cateList
    // },
    tag_list: {
        api: serviceTag
    }
})

const cate_list:any = ref([])
const getCateList = async () => {
    const res = await cateList({})
    console.log(res)
    let arr:any = []
    res.lists.forEach(((item:any)=>{
        if (item.is_enable == 1) {
           arr.push(item)
        }
    }))
    cate_list.value = arr;
}
getCateList()

const handleSave = async () => {
    await formRef.value?.validate()
    let params = JSON.parse(JSON.stringify(formData));
    console.log(params)
    params.cate_id = params.cate_id.join(',')
    params.tags = params.tags.join(',')
    if (route.query.status == '4') {
        params.area_ids = params.server_arr.join(',')
    } else {
        params.area_ids = params.server_area.join(',')
    }
    if (route.query.type == 'pass') {
        await feedback.confirm('确认审核通过？')
        await saveUser(params)
        if (route.query.status == '4') {
            await passDetail({ id: params.id })
        } else {
            await passUser({ id: params.id })
        }
        feedback.msgSuccess('审核通过')
    } else if (route.query.id) {
        await saveUser(params)
        feedback.msgSuccess('保存成功')
    } else {
        await saveUser(params)
        feedback.msgSuccess('新增成功')
    }
    removeTab()
    router.back()
}
const handleUp = async (id:number) => {
    await feedback.confirm('是否确认完成此操作', '商品上架')
    await changeGoodStatus({
        id,
        status: 1
    })
    getLists()
}
const handleDown = async (id:number) => {
    await feedback.confirm('是否确认完成此操作', '商品下架')
    await changeGoodStatus({
        id,
        status: 2
    })
    getLists()
}
const handleInfo = (row:any) => {
    router.push({ path: getRoutePath('server.server/saveGood'), query: { server_id: route.query.id, id: row.id } });// server_id 服务商id  id 商品的id
}
const handleDelete = async (id:number) => {
    await feedback.confirm('是否确认完成此操作', '商品删除')
    await delGoods({
        id
    })
    getLists()
}

// 主营业务选中数据发生变化
const changeProductCate = (val: any) => {
    // console.log(val)
}

const isDisabled = ref(false)
const changeCity = (value: any) => {
    console.log(value)
    if (value.includes('0') && value.length > 1) {
        formData.server_area = ['0'];
        isDisabled.value = true;
    }
    if (value.includes(0) && value.length == 1) {
        isDisabled.value = true;
    }
    if (value.length == 0) {
        isDisabled.value = false;
    }
}

// 获取当前详情
const getDetailNew = async () => {
    await nextTick()
    const data = await getDetail({
        id: route.query.id
    })
    data.tag_ids = [];
    let arr: number[] = []
    data.cate_id.split(',').forEach((item: any)=>{
        if (item !== '') {
            arr.push(item)
        }
    })
    data.cate_id = arr
    formData.is_auth = '0'
    formData.is_enable = 1
    Object.keys(formData).forEach((key) => {
        //@ts-ignore
        formData[key] = data[key]
    })
    formData.from_area_id = String(formData.from_area_id)
    formData.server_area = data.area_arr
    formData.server_arr = String(formData.area_id).split(',')
    // if (formData.from_area_id != 0) {
    //     allDisabled.value = true;
    // } else {
    //     allDisabled.value = false;
    // }
    await nextTick()
    setTimeout(()=>{
        let objArr:any = []
        optionsData.tag_list.forEach((itemC)=>{
            objArr.push(itemC.name)
        })
        if (data.tags.length == 0) {
            return false
        }
        data.tags.forEach((item: any)=>{
            if (objArr.indexOf(item) === -1) {
                optionsData.tag_list.push({
                    name: item
                })
            }
        })
    },300)
    
}
// 有两个不同的详情

// if (route.query.status == '4') {
//     route.query.id &&  getDetailNew()
// } else {
//     route.query.id && getDetails()
// }
// route.query.id &&  getDetailNew()
route.query.id &&  getDetails()
const allDisabled = ref(false)


// 服务产品列表---
// 切页序号变化
const indexAdd = (index: number) => {
    const page = pager.page // 当前页码
    const pagesize = pager.size // 每页条数
    return index + 1 + (page - 1) * pagesize
}
const queryParams = reactive({
    server_id: route.query.id
})
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: goodsList,
    params: queryParams
})
const tabChange = (val:any) => {
    console.log(val)
    if (val == 'relate_product') {
        route.query.id && getLists()
    }
}

// 缓存回来的时候表格刷新
onActivated(()=>{
    console.log('onActivated')
    if (defaultTab.value == 'relate_product') {
        route.query.id && getLists()
    }  
})

</script>
<style scoped lang="scss">
::v-deep .el-tabs__nav-wrap {
    overflow-x: auto;
    width: 86%;
    margin-left: 10px;
}

::v-deep .el-tabs__nav-wrap::after {
    display: none;
}
</style>